<template>
    <div
     class="app-back">
        <div class="app-back-icon" @click="handleExpand">
            <el-icon><DArrowLeft /></el-icon>
        </div>
        <div
        class="app-body scrollbar">
            <ul
            ref="appBackNode"
            class="flex-cloumn-start full-layout"
            id="app-back-box">
                <li 
                draggable="true"
                v-for="item in dataSource" 
                :key="item.name"
                :data-key="item.id"
                @contextmenu.prevent="handleMenu($event, 'appMenuVisible', item)"
                class="app-content flex-column-center">
                    <el-tooltip
                    effect="dark"
                    :content="item.name"
                    placement="left">
                        <div class="app-img" @click="handleShow(item)">
                            <img
                            v-if="!item.xIcon"
                            :style="{backgroundColor:item.background}"
                            :src="CheckFullUrl(item.icon)" 
                            draggable="false"/>

                            <img
                            v-else
                            :style="{backgroundColor:item.background}"
                            :src="item.xIcon" 
                            draggable="false"/>
                        </div>
                    </el-tooltip>
                </li>
            </ul>
        </div>
     </div>
 </template>
 
<script lang='ts'>
import { onBeforeUnmount, onMounted, reactive, toRefs } from 'vue';
import { useAppStore } from '@/store/app';
import useCheck from '@/hooks/useCheck';
export default {
    name:'appBack',
    props: {
        dataSource:{
            type:Array,
            default:null
        }
    },
    components: {
    },
    emits:['menu', 'show'],
    setup (props, context) 
    {
        const appStore = useAppStore();
        let data = reactive({
            isExpand:false
        });
        let methods = {
            handleMenu (e, value, item = null)
            {
                // if (value === 'appMenuVisible')
                // {
                //     e.stopPropagation();
                // }
                context.emit('menu', e, value, item);
            },
            handleShow (item)
            {
                context.emit('show', item);
            },
            handleExpand ()
            {
                data.isExpand = !data.isExpand;
                let dom = document.querySelector('.app-back') as HTMLDivElement;
                let dom1:any = document.querySelector('.app-back-icon');
                if (data.isExpand)
                {
                    // 展开
                    dom.style.transform = 'translateX(0)';
                    dom1.children[0].style.transform = 'rotate(180deg)';
                }
                else
                {
                    // 折叠
                    dom.style.transform = 'translateX(100%)';
                    dom1.children[0].style.transform = 'rotate(0deg)';
                }
            }
        };

        onMounted(() => 
        {
            //
        });

        onBeforeUnmount(() => 
        {
            //
        });
        return { 
            ...toRefs(data),
            ...methods,
            appStore,
            ...useCheck()
        };
    }
};
</script>
 
<style scoped lang="scss">

.app-back {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    background: var(--el-bg-color-folder);
    width: 100px;
    max-width: 100px;
    height: 100%;
    transition: all .5s;
    color: $TextColor;
    font-size: 14px;
    z-index: 2000;

    // &:hover {
    //     transform: translateX(0);

    //     .app-back-icon i {
    //         transform: rotate(180deg);
    //     }
    // }

    .app-back-icon {
        position: absolute;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 30px;
        top: 20%;
        left: -30px;
        background-color: var(--el-bg-color-folder);
        cursor: pointer;

        i {
            transition: all .3s;
        }
    }


}

.app-body {
    height: 100%;
    overflow-y: auto;
}

#app-back-box {
    // padding: 10px 0;
}

.app-content {
    // margin: 8px 10px;

    .app-img {
        width: 60px;
        height: 60px;
        background-color: $PageBackgroundColor;
        box-shadow: 0 0 5px #0000001a;
        transition: all .2s;
        cursor: pointer;
        overflow: hidden;
        border-radius: 10px;
        margin: 5px 0;

        &:hover {
            transform: scale(1.1);
        }
    }

    p {
        font-size: 14px;
        margin-top: 5px;
    }
}


</style>
 